<template>
    <div class="my-properties-panel">
        <el-tabs type="border-card">
            <el-tab-pane label="基础管理">

                <el-form :inline="true" :model="bpmnInfo" label-width="100px">
                    <el-form-item label="节点ID">
                        <el-input v-model="bpmnInfo.id" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="节点类型">
                        <el-input v-model="bpmnInfo.type" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="节点名称">
                        <el-input v-model="bpmnInfo.name" @blur="updateBpmnProp"></el-input>
                    </el-form-item>
                    <el-form-item label="x" v-if="bpmnInfo.x">
                        <el-input v-model="bpmnInfo.x" @blur="updateBpmnProp"></el-input>
                    </el-form-item>
                    <el-form-item label="y" v-if="bpmnInfo.y">
                        <el-input v-model="bpmnInfo.y" @blur="updateBpmnProp"></el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <!--            <el-tab-pane label="PartNoProcData" v-if="activityInfo.businessObject.$attrs.info">-->
            <!--                <el-form :inline="true" :model="activityInfo" label-width="100px">-->
            <!--                    <el-form-item label="json内容" v-if="activityInfo.businessObject">-->
            <!--                        <el-input-->
            <!--                                type="textarea"-->
            <!--                                rows="20"-->
            <!--                                placeholder="请输入内容"-->
            <!--                                :value="JSON.stringify(activityInfo.businessObject.$attrs.info.PartNoProcData)">-->
            <!--                        </el-input>-->
            <!--                    </el-form-item>-->
            <!--                </el-form>-->
            <!--            </el-tab-pane>-->
            <!--            <el-tab-pane label="ResultBits" v-if="activityInfo.businessObject.$attrs.info">-->
            <!--                <el-form :inline="true" :model="activityInfo" label-width="100px">-->
            <!--                    <el-form-item label="json内容" v-if="activityInfo.businessObject">-->
            <!--                        <el-input-->
            <!--                                type="textarea"-->
            <!--                                rows="20"-->
            <!--                                placeholder="请输入内容"-->
            <!--                                :value="JSON.stringify(activityInfo.businessObject.$attrs.info.ResultBits)">-->
            <!--                        </el-input>-->
            <!--                    </el-form-item>-->
            <!--                </el-form>-->
            <!--            </el-tab-pane>-->
        </el-tabs>
    </div>
</template>

<script>
    export default {
        props: {
            bpmnModeler: Object,
            activityInfo: Object
        },
        name: "prop-panel",
        data() {
            return {
                bpmnInfo: {
                    id: null,
                    name: null,
                    type: null,
                    x: null,
                    y: null
                }
            };
        },
        watch: {
            activityInfo: { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                    if (newV) {
                        this.bpmnInfo.id = newV.id;
                        if (newV.businessObject) {
                            this.bpmnInfo.name = newV.businessObject.name;
                        } else {
                            this.bpmnInfo.name = null;
                        }

                        this.bpmnInfo.type = newV.type;
                        this.bpmnInfo.x = newV.x;
                        this.bpmnInfo.y = newV.y;
                    }
                },
                deep: true
            }
        },
        methods: {
            updateBpmnProp() {
                var elementRegistry = this.bpmnModeler.get('elementRegistry');
                var elm = elementRegistry.get(this.activityInfo.id);
                const modeling = this.bpmnModeler.get('modeling');
                modeling.updateProperties(elm, {
                    'name': this.bpmnInfo.name,
                    'x': this.bpmnInfo.x,
                    'y': this.bpmnInfo.y,
                });

            },
        }
    }
</script>

<style lang="scss" scoped>
    .my-properties-panel {
        background: #fff;
        position: absolute;
        right: 10px;
        top: 10px;
        bottom: 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
        width: 350px;

        .my-prop-form-warp {
            padding: 5px;
        }
    }


</style>